<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		
		<title>List MustDo</title>
		
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
		<link rel="stylesheet" href="css/custom.css" />
		<script type="text/javascript" charset="utf-8" src="js/cordova-2.9.0.js"></script>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	   	<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/library.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/waypoints.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/waypoints-infinite.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/common.js"></script>
		
		<script type="text/javascript">		
		
			var page = 1;
		
			$(document).on("pageinit", function(event){
				loadMustDo();
			});
			
			function loadMustDo(){
				//alert(1);
		 		$("#errorMsg").html("");
		 		
		 	  	var url = appURL + "/getMustDo.php";
		 	  	//alert(url);
		 	  	
			 	$.mobile.loadingMessage = "Loading...";
			 	$.mobile.loading('show');
		 		
			 	$.getJSON(url, {page: page}).done(function(data) {
		 			//alert("Message: " + data.status);
		 			if(data.status == "ok"){

		 			 	var arrMustDo = data.MustDo;
		 			 	var html='';
		 			    
		 			 	for (var i = 0; i < arrMustDo.length; i++) {
		 			    	//alert(arrMustDo[i].datetime);
		 			    	html+='<div class="listEl" style="text-align:center;">';
		 			    	html+='		<div style="text-align: center; width:100%; background-image: url(./img/default.png); background-repeat: no-repeat;">';
		 			    	html+='			<img src="' + arrMustDo[i].picture + '" width="150px">';
		 			    	html+='		</div>';
		 			        html += '	<p>Date: ' + arrMustDo[i].datetime + '<br><br>' + arrMustDo[i].description + '</p>';
		 			    	html+='</div>';
		 			    	html+='<div style="background-color: black; height:2px; width:100%; margin-bottom: 15px;"></div>';
		 			    }
		 			    //alert(html);
		 			    $('#MustDo').append(html);
		 			    
		 			   if(data.lastPage){
		 			 		$('#MustDo').waypoint('destroy');
		 			 		$('#buttonMore').hide();
		 			 	} else {
			 			   	$('#MustDo').waypoint('infinite', {
			 			   	  	container: 'auto',
				 			    items: '.infinite-item',
				 			    more: '.infinite-more-link',
				 			    offset: 'bottom-in-view',
				 				loadingClass: 'infinite-loading',
				 			    onBeforePageLoad: $.noop,
				 			    onAfterPageLoad: loadMore
			 			   	});
						}
		 				//$("#MustDo").center();
		 			 	
		 			}else{
		 			 	//alert("No se pudo enviar email");
		 			 	$("#errorMsg").html(data.message);
		 			}
		 			$.mobile.loading('hide');
		 		});
		 	}
			
			
			function loadMore(){
				//alert("loading!");
				page = page + 1;
				loadMustDo();
			}
			
			$.fn.center = function () {
			    this.css("position","absolute");
			    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
			                                                $(window).scrollTop()) + "px");
			    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
			                                                $(window).scrollLeft()) + "px");
			    return this;
			}
		
			
		 </script>
	</head>
<body style="text-align:center;">

<div  data-role="page" id="list"> 
	<div  data-role="header" data-position="fixed"><img src="images/img-logo.jpg" height="80" width="80"/></div> 
	<div  data-role="content">
		<table style="width: 100%">
			<tr><td><div class="errorMsg" id="errorMsg"></div></td></tr>
			<tr>
				<td>
					<br>
					MustDo
				</td>
			</tr>
			<tr>
				<td>			
					&nbsp;
				</td>
			</tr>
			<tr>
				<td>	
					<button onclick="window.location.href='make.html'">I Must do!!!</button>		
				</td>
			</tr>
			<tr>
				<td>	
					<div style="display:none;"><a class="infinite-more-link" href="http://www.xeliom.com/MustDo/dummy.php"></a></div>
					<div id='MustDo'></div>		
				</td>
			</tr>
			<tr>
				<td>		
					<div id="buttonMore" style="display:none;"><button onclick="loadMore();">More...</button></div>
				</td>
			</tr>
		</table>
	</div> 
	<div  data-role="footer" data-position="fixed">
		<button class="button-main-small" onclick="exitAPP();">Exit</button>
	</div>
</div>
</body>
</html>